<template>
  <div class="page region-edit">
    <StoreChoice
      ref="StoreChoice"
      :current="shopList"
      :multipleChoice="true"
      :multipleSelectAll="false"
      @listenToStoreSelect="getSelectStoreValue"
      reqUrl="/newapp/region/queryCityShop.do"
      :noneCheck="false"
    />
    <div class="scroll-view">
      <customHeader :middleTitle="middleTitle" />
      <div class="page-body">
        <ul class="form-eidt form-style">
          <li>
            <span>区域名称</span>
            <div>
              <inputClear
                warpClass="input-right"
                v-model="regionName"
                placeholder="请输入"
                maxlength="10"
              />
            </div>
          </li>
          <li @click="handleClickSelectStore">
            <span>门店范围</span>
            <div>
              {{storeFormate()}}
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <div class="btn-wrap">
          <div
            class="btn"
            :class="{disabled:!regionName}"
            @click="submit(!regionName)"
          >提交</div>
          <div class="btn delete" v-if="regionId" @click="deleteRegion">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import customHeader from '../../components/header/header';
import inputClear from "../../components/inputClear/inputClear";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import { Toast, MessageBox } from 'mint-ui';
export default {
  name: 'regionEdit',
  data() {
    return {
      param: null,
      middleTitle: "添加区域",
      regionId: "",
      regionName: "",
      shopList: [],
      loading: false,
      loading2: false,
    };
  },
  methods: {
    storeFormate() {
      let v = "请选择";
      if (this.shopList.length) {
        v = `已选${this.shopList.length}家门店`;
      }
      return v;
    },
    //门店选择回调
    getSelectStoreValue(value, storeName) {
      this.shopList = value;
    },
    handleClickSelectStore() {
      this.$refs.StoreChoice.popupShow();
    },
    submit(disabled) {
      if (!disabled || this.loading) {
        let reqUrl = "/newapp/region/addRegion.do";
        const shopList = this.shopList.map((shop) => {
          return { shopId: shop.selectKey, shopName: shop.selectName };
        });
        let param = { regionName: this.regionName, shopList: shopList };
        if (this.regionId) {
          reqUrl = "/app/region/updateRegion.do";
          param.regionId = this.regionId;
        }
        this.loading = true;
        this.ajax({
          url: reqUrl,
          type: "post",
          data: param,
          controlLoading: true,
        })
          .then(response => {
            this.loading = false;
            if (response.success && response.resultObject) {
              Toast('操作成功');
              this.$router.back();
            } else {
              Toast(response.msg);
            }
          })
          .catch(error => {
            this.loading = false;
          });
      }
    },
    deleteRegion() {
      MessageBox({
        title: "删除区域",
        message: "删除区域后，该区域经理将被设为离职状态，确定要删除该区域吗？",
        showCancelButton: true,
        closeOnClickModal: true
      }).then(action => {
        if (action == "confirm") {
          this.loading2 = true;
          this.ajax({
            url: `/newapp/region/delRegion.do?regionId=${this.regionId}`,
            type: "get",
            controlLoading: true,
          })
            .then(response => {
              this.loading2 = false;
              if (response.success && response.resultObject) {
                Toast('操作成功');
                this.$router.back();
              } else {
                Toast(response.msg);
              }
            })
            .catch(error => {
              this.loading2 = false;
            });
        }
      });
    },
    getDetails() {
      this.ajax({
        url: `/newapp/region/queryRegionDetail.do?regionId=${this.regionId}`,
        type: "get",
        controlLoading: true,
      })
        .then(response => {
          if (response.success) {
            const data = response.resultObject;
            this.regionName = data.regionName;
            this.shopList = data.shopList.map((i) => {
              return { selectKey: i.shopId };
            });
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {

        });
    }
  },
  components: {
    customHeader,
    inputClear,
    StoreChoice
  },
  created() {
    const param = this.$route.query;
    if (param && param.regionId) {
      this.regionId = param.regionId;
      this.middleTitle = "编辑区域";
      this.getDetails();
    }
  }
};
</script>
<style lang='scss' scoped>
@import "regionManage";
</style>
<style lang='scss'>
.input-right {
  text-align: right !important;
}
</style>